<template>
  <div class="" style="overflow: auto;">
    <div class="goodsLineInfo-page">
<!--       <div class="goodsLineInfo-left">-->
<!--          <el-card class="box-card">-->
<!--              <div class="cart-left-item" :class="{'selected': title== '概览' }" @click="changeTitle('概览')">概览</div>-->
<!--              <div class="cart-left-item" :class="{'selected': title== '基本信息' }" @click="changeTitle('基本信息')">基本信息</div>-->
<!--              <div class="cart-left-item" :class="{'selected': title== '产品线' }" @click="changeTitle('产品线')">产品线</div>-->
<!--              <div class="cart-left-item" :class="{'selected': title== '联系人' }" @click="changeTitle('联系人')">联系人</div>-->
<!--              <div class="cart-left-item" :class="{'selected': title== '使用材料' }" @click="changeTitle('使用材料')">使用材料</div>-->
<!--              <div class="cart-left-item" :class="{'selected': title== '跟进记录' }" @click="changeTitle('跟进记录')">跟进记录</div>-->
<!--              <div class="cart-left-item" :class="{'selected': title== '试料记录' }" @click="changeTitle('试料记录')">试料记录</div>-->
<!--              <div class="cart-left-item" :class="{'selected': title== '合同记录' }" @click="changeTitle('合同记录')">合同记录</div>-->
<!--              <div class="cart-left-item" :class="{'selected': title== '质量协议' }" @click="changeTitle('质量协议')">质量协议</div>-->
<!--              <div class="cart-left-item" :class="{'selected': title== '推荐人' }" @click="changeTitle('推荐人')">推荐人</div>-->
<!--              <div class="cart-left-item" :class="{'selected': title== '售后记录' }" @click="changeTitle('售后记录')">售后记录</div>-->
<!--              <div class="cart-left-item" :class="{'selected': title== '操作记录' }" @click="changeTitle('操作记录')">操作记录</div>-->
<!--          </el-card>-->
<!--       </div>-->
       <div class="goodsLineInfo-right">
           <customer-overview  ref="customerOverview" @update="changeTitle"></customer-overview>
           <div class="customerOverview-page" style="padding:0 20px;margin-top:-20px">
<!--             <el-card class="box-card">-->
               <el-menu :default-active="title" class="el-menu-demo" mode="horizontal" @select="changeTitle">
                 <el-menu-item index="概览">概览</el-menu-item>
                 <el-menu-item index="基本信息">基本信息</el-menu-item>
                 <el-menu-item index="产品线">产品线</el-menu-item>
                 <el-menu-item index="联系人" v-if="info.isMy == 1">联系人</el-menu-item>
                 <el-menu-item index="使用材料">使用材料</el-menu-item>
                 <el-menu-item index="跟进记录">跟进记录</el-menu-item>
                 <el-menu-item index="试料记录">试料记录</el-menu-item>
                 <el-menu-item index="合同记录">合同记录</el-menu-item>
                 <el-menu-item index="质量协议">质量协议</el-menu-item>
                 <el-menu-item index="推荐人">推荐人</el-menu-item>
                 <el-menu-item index="售后记录">售后记录</el-menu-item>
                 <el-menu-item index="操作记录">操作记录</el-menu-item>
               </el-menu>
<!--             </el-card>-->

           </div>

            <div class="customerOverview-page" v-if="title== '概览'">
               <customer-progress ref="customerProgress" ></customer-progress>
             </div>

           <customer-info v-if="title== '基本信息'" ref="customerInfo"></customer-info>
           <customer-goodsLine v-if="title== '产品线'" ref="customerGoodsLine"></customer-goodsLine>
           <customer-lxr v-if="title== '联系人'" ref="customerLxr"></customer-lxr>
           <customer-sycl v-if="title== '使用材料'" ref="customerSycl"></customer-sycl>
           <customer-gj v-if="title== '跟进记录'" ref="customerGj"></customer-gj>
           <customer-sl v-if="title== '试料记录'" ref="customerSl"></customer-sl>
           <customer-order v-if="title== '合同记录'" ref="customerOrder"></customer-order>
           <customer-zlxy v-if="title== '质量协议'" ref="customerZlxy"></customer-zlxy>
           <customer-tjr v-if="title== '推荐人'" ref="customerTjr"></customer-tjr>
           <customer-sh v-if="title== '售后记录'" ref="customerSh"></customer-sh>
           <customer-cz v-if="title== '操作记录'" ref="customerCz"></customer-cz>
       </div>
    </div>



  </div>
</template>

<script>
    import { mapGetters } from 'vuex'
    import {formatDate} from '@/utils/date';
    import store from '@/store'
    import {customerNewBaseInfo} from '@/api/company'
    import customerOverview from './components/customerOverview'
    import customerInfo from './components/customerInfo'
    import customerGoodsLine from './components/customerGoodsLine'
    import customerLxr from './components/customerLxr'
    import customerSycl from './components/customerSycl'
    import customerGj from './components/customerGj'
    import customerSl from './components/customerSl'
    import customerOrder from './components/customerOrder'
    import customerTjr from './components/customerTjr'
    import customerSh from './components/customerSh'
    import customerCz from './components/customerCz'
    import customerZlxy from './components/customerZlxy'
    import customerProgress from './components/customerProgress'
    export default {
      name: "customerGoodsLineInfo",
      data(){
          return{
              roles:store.getters.roles ? store.getters.roles : [],
              title:'概览',
              info:{}
          }
      },
      components : {
        customerOverview,
        customerInfo,
        customerGoodsLine,
        customerLxr,
        customerSycl,
        customerGj,
        customerSl,
        customerOrder,
        customerTjr,
        customerSh,
        customerCz,
        customerZlxy,
        customerProgress
      },
      computed: {
        ...mapGetters([
          'name',
          'mobile',
          'userId'
        ]),

      },
      created() {
        this.$nextTick(()=>{
          this.$refs.customerOverview.init(this.$route.query.id);
          this.$refs.customerProgress.init(this.$route.query.id)
        })
        //获取客户基本信息
        customerNewBaseInfo({customerId:this.$route.query.id}).then((res)=>{
          this.info = res
        })
      },
      filters: {

        },
      methods:{
        changeTitle(text){
          console.log("text",text)
           this.title = text ? text : this.title ;
           switch (this.title){
             case '概览':
               this.$nextTick(()=>{
                 this.$refs.customerProgress.init(this.$route.query.id)
               })
               break;
             case '基本信息':
               this.$nextTick(()=>{
                 this.$refs.customerInfo.init(this.$route.query.id);
               })
               break;
             case '联系人':
               this.$nextTick(()=>{
                 this.$refs.customerLxr.init(this.$route.query.id);
               })
               break;
             case '使用材料':
               this.$nextTick(()=>{
                 this.$refs.customerSycl.init(this.$route.query.id);
               })
               break;
             case '跟进记录':
               this.$nextTick(()=>{
                 this.$refs.customerGj.init(this.$route.query.id);
               })
               break;
             case '合同记录':
               this.$nextTick(()=>{
                 this.$refs.customerOrder.init(this.$route.query.id);
               })
               break;
             case '推荐人':
               this.$nextTick(()=>{
                 this.$refs.customerTjr.init(this.$route.query.id);
               })
               break;
             case '操作记录':
               this.$nextTick(()=>{
                 this.$refs.customerCz.init(this.$route.query.id);
               })
               break;
             case '售后记录':
               this.$nextTick(()=>{
                 this.$refs.customerSh.init(this.$route.query.id);
               })
               break;
             case '产品线':
               this.$nextTick(()=>{
                 this.$refs.customerGoodsLine.init(this.$route.query.id);
               })
               break;
             case '试料记录':
               this.$nextTick(()=>{
                 this.$refs.customerSl.init(this.$route.query.id);
               })
               break;
             case '质量协议':
               this.$nextTick(()=>{
                 this.$refs.customerZlxy.init(this.$route.query.id);
               })
               break;

           }
        }

      }
    }
</script>

<style lang="scss">
   .goodsLineInfo-left{
      width:100px;
     padding:20px;
     padding-right:0;
     height:calc(100vh - 120px);
     overflow:auto;
      float:left;
     .el-card__body{
       padding:0
     }
     .cart-left-item{
       color:#5e6d82;
       height:50px;
       line-height: 50px;
       cursor: pointer;
       font-size: 12px;
       text-align: center;
       border-bottom:1px solid #EBEEF5;
     }
     .cart-left-item:hover{
       background: #f2f2f2;
     }
     .cart-left-item.selected{
        color:#409eff;
        border-left:4px solid #409eff;
   }
   }
   //.goodsLineInfo-right{
   //    //padding-left:20px;
   //  // width:calc(100% - 120px);
   //  // height:calc(100vh - 120px);
   //  // overflow-y: auto;
   //  //float:left;
   //}
</style>
